<template>
    <div>
        <div class="box1">
            <barCharts></barCharts>
        </div>
        <div class="box2">
            <div class="box2Children">
                <lineCharts></lineCharts>
            </div>
            <div class="box2Children">
                <pieCharts></pieCharts>
            </div>
        </div>
        <div class="box3">Copyright © 2017-2024</div>
    </div>
</template>

<script setup>
import lineCharts from './line/index.vue'
import barCharts from './bar/index.vue'
import pieCharts from './pie/index.vue'
</script>

<style scoped lang="scss">
.box1{
    height: 400px;
    border: 1px solid #dedede;
    border-radius: 5px;
}
.box2{
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    .box2Children{
        width: 49.4%;
        height: 380px;
        border: 1px solid #dedede;
        border-radius: 5px;
    }
}
.box3{
    text-align: center;
    font-size: 12px;
    margin-top: 20px;
}
</style>